<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../common/base_body_header.jsp" %>
<%@include file="../common/navbar.jsp" %>
<%@include file="../common/page_content_pre.jsp" %>

<link rel="stylesheet" href="${GLOBAL.staticJsPath}/assets/qiniu/fileupload.css"/>
<link rel="stylesheet" href="${GLOBAL.staticJsPath}/jquery-ui.css"/>

<div class="page-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="widget-box">
                <div class="widget-header">
                    <h4>${not empty neighborhood.nbhId?'修改':'添加'}小区</h4>
                </div>

                <input type="hidden" id="uploadUrl" value="${uploadUrl}"/>
                <input type="hidden" id="storeUrl" value="${storeUrl}"/>
                <input type="hidden" id="qiniuUploadToken" value="${token}"/>

                <div class="widget-body">
                    <div class="widget-main no-padding">
                        <form:form class="form-horizontal" modelAttribute="neighborhood" enctype="multipart/form-data"
                                   action="${GLOBAL.basePath}/neighborhood/save" method="post" id="neighborhoodForm">
                            <form:hidden path="nbhId"/>
                            <fieldset>
                                <div class="form-group">
                                    <input id="oldDistrict" name="oldDistrict" type="hidden"
                                           value="${sysUser.district}">
                                    <input id="oldNbhName" name="oldNbhName" type="hidden"
                                           value="${sysUser.nbhName}">
                                    <label class="col-sm-3 control-label">区域：</label>

                                    <div class="col-sm-4">
                                        <form:select class="input-xlarge" path="district" id="districtId">
                                            <c:forEach items="${fns:getDictList('district')}" var="item">
                                                <option value="${item.name}"
                                                        <c:if test="${item.name == neighborhood.district}">selected</c:if>>${item.value}</option>
                                            </c:forEach>
                                        </form:select>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">小区名称：</label>

                                    <div class="col-sm-5">
                                        <form:input path="nbhName" htmlEscape="false" maxlength="50" id="nbhNameId"
                                                    class="input-xlarge required" placeholder="请输入小区名"/>
                                        <span class="help-inline"><font color="red">*</font> </span>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-3 control-label"></label>
                                    <div class="col-sm-5"><span id="addressInfo" style="color: red"></span></div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">小区地址：</label>

                                    <div class="col-sm-5">
                                        <form:input path="address" htmlEscape="false" maxlength="150" id="search"
                                                    class="col-sm-11 required" oninput="queryAddress()"
                                                    placeholder="请输入楼盘地址"/>
                                        <form:input path="lat" class="col-sm-11 required"
                                                    style="margin-top: 10px;width: 200px;"
                                                    id="lat" placeholder="请输入小区坐标lat"/>
                                        <form:input path="lon" class="col-sm-11 required"
                                                    style="margin-top: 10px;width: 200px;"
                                                    id="lon" placeholder="请输入小区坐标lng"/>
                                        <span class="help-inline"><font color="red">*</font> </span>
                                    </div>
                                </div>
                            </fieldset>
                            <hr>
                            <div class="form-group">
                                <label class="col-sm-3 control-label"><h4>楼盘基本信息</h4></label>
                            </div>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">建筑年代：</label>

                                    <div class="col-sm-5">
                                        <form:input path="buildingYears" htmlEscape="false" readonly="true"
                                                    class="input-xlarge required"
                                                    onClick="WdatePicker({dateFmt:'yyyy-MM'})"/>
                                        <span class="help-inline"><font color="red">*</font> </span>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">开发公司：</label>

                                    <div class="col-sm-5">
                                        <form:input path="developmentCompany" htmlEscape="false" maxlength="50"
                                                    class="input-xlarge required" placeholder="请输入开发公司"/>
                                        <span class="help-inline"><font color="red">*</font> </span>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">物业公司：</label>

                                    <div class="col-sm-5">
                                        <form:input path="propertyManager" htmlEscape="false" maxlength="50"
                                                    class="input-xlarge required" placeholder="请输入物业公司"/>
                                        <span class="help-inline"><font color="red">*</font> </span>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">物业费：</label>

                                    <div class="col-sm-5">
                                        <form:input path="propertyFee" htmlEscape="false" type="number"
                                                    class="input-xlarge required" placeholder="请输入物业费"/>
                                        <span class="help-inline"><font color="red">*</font> </span>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">建筑类型：</label>

                                    <div class="col-sm-5">
                                        <form:select class="input-xlarge required" path="buildingType">
                                            <c:forEach items="${fns:getDictList('build_type')}" var="item">
                                                <option value="${item.name}"
                                                        <c:if test="${item.name == neighborhood.buildingType}">selected</c:if>>${item.value}</option>
                                            </c:forEach>
                                        </form:select>
                                        <span class="help-inline"><font color="red">*</font> </span>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">总栋数：</label>

                                    <div class="col-sm-5">
                                        <form:input path="buildingTotal" htmlEscape="false"
                                                    class="input-xlarge required" placeholder="请输入总栋数"/>
                                        <span class="help-inline"><font color="red">*</font> </span>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">总户数：</label>

                                    <div class="col-sm-5">
                                        <form:input path="residenters" htmlEscape="false"
                                                    class="input-xlarge required" placeholder="请输入总户数"/>
                                        <span class="help-inline"><font color="red">*</font> </span>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">产权年限：</label>

                                    <div class="col-sm-5">
                                        <form:input path="ageLimit" htmlEscape="false"
                                                    class="input-xlarge required" placeholder="请输入产权年限"/>
                                        <span class="help-inline"><font color="red">*</font> </span>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">车位状况：</label>

                                    <div class="col-sm-5">
                                        <form:input path="parkingCondition" htmlEscape="false"
                                                    class="input-xlarge required" placeholder="请输入车位状况"/>
                                        <span class="help-inline"><font color="red">*</font> </span>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">绿化率：</label>

                                    <div class="col-sm-5">
                                        <form:input path="greeningRate" htmlEscape="false"
                                                    class="input-xlarge required" placeholder="绿化率"/>
                                        <span class="help-inline"><font color="red">*</font> </span>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">总占地：</label>

                                    <div class="col-sm-5">
                                        <form:input path="totalArea" htmlEscape="false"
                                                    class="input-xlarge required" placeholder="总占地"/>
                                        <span class="help-inline"><font color="red">*</font> </span>
                                    </div>
                                </div>
                            </fieldset>

                            <hr/>

                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">小区图片(至少三张)：</label>

                                    <div class="col-sm-6">
                                        <div id="photos" class="row" style="width:750px">
                                            <div id="container" class="col-xs-4">
                                                <img src="${GLOBAL.staticImagePath}/add_bg.png">

                                                <div class="add">
                                                    <img id="addfile" src="/images/add.png">
                                                </div>
                                            </div>

                                            <c:if test="${photoList!= null || fn:length(photoList) == 0}">
                                                <c:forEach items="${photoList}" var="item" varStatus="plist">
                                                    <div id="${item.photoSource}-id" class="col-xs-4"><img
                                                            id="${item.photoSource}"
                                                            src="${storeUrl}${item.photoSource}?imageView2/0/w/160/h/160">

                                                        <div class="q-label"><input value="${item.photoDesc}"></div>
                                                        <div class="delete" onclick="deletePic($(this).parent())"><img
                                                                src="/images/delete.png"></div>
                                                    </div>
                                                </c:forEach>
                                            </c:if>
                                        </div>
                                        <span id="uploadInfo" style="color: red"></span>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <label class="col-sm-3 control-label">小区专员：</label>
                                <div class="col-sm-5">
                                    <form:select path="fzId" style="width:210px">
                                        <c:forEach items="${users}" var="item">
                                            <c:if test="${item.userId == neighborhood.fzId}">
                                                <form:option value="${item.userId}"
                                                             selected="selected">${item.username}</form:option>
                                            </c:if>
                                            <c:if test="${item.userId != neighborhood.fzId}">
                                                <form:option value="${item.userId}">${item.username}</form:option>
                                            </c:if>
                                        </c:forEach>
                                    </form:select>
                                </div>
                            </fieldset>

                            <fieldset>
                                <div class="form-group">
                                    <div id="imageUploadContainer">
                                    </div>
                                    <div id="upload_file_container"></div>
                                </div>
                            </fieldset>

                            <div class="form-actions center">
                                <button type="button" class="btn btn-sm btn-grey" id="go_back_btn">
                                    返回
                                    <i class="icon-reply icon-on-right bigger-110"></i>
                                </button>
                                <shiro:hasPermission name='neighborhood:edit'>
                                    <button type="button" class="btn btn-sm btn-success" id="save_btn">
                                        保存
                                        <i class="icon-save icon-on-right bigger-110"></i>
                                    </button>
                                </shiro:hasPermission>
                            </div>
                        </form:form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<%@include file="../common/page_content_suf.jsp" %>
<%@include file="../common/script.jsp" %>

<script type="text/javascript" src="${GLOBAL.staticJsPath}/assets/qiniu/plupload.full.min.js"></script>
<script type="text/javascript" src="${GLOBAL.staticJsPath}/assets/qiniu/moxie.min.js"></script>
<script type="text/javascript" src="${GLOBAL.staticJsPath}/assets/qiniu/qiniu.min.js"></script>
<script type="text/javascript" src="${GLOBAL.staticJsPath}/assets/my97/WdatePicker.js"></script>
<script type="text/javascript" src="${GLOBAL.staticJsPath}/uploadFile/neighborhood/fileupload.js"></script>
<script type="text/javascript" src="${GLOBAL.staticJsPath}/jquery.z-pager.js"></script>
<script type="text/javascript" src="${GLOBAL.staticJsPath}/jquery-ui.js"></script>

<script type="text/javascript">
    var qiniuDomain = '${GLOBAL.basePath}';
    var qiniuPath = '${GLOBAL.qiniuPath}';

    //展览下拉选项
    ART.mLoadSelectOption("${GLOBAL.basePath}/order/exhibitionList", {}, $("#s_pItemKey"), "id", "title", true);

    $(document).ready(function () {
        $(".fileinput-remove").hide();
        $("#neighborhoodForm").validate({
            rules: {
                nbhName: {
                    remote: {
                        url: "${GLOBAL.basePath}/neighborhood/notExists",
                        type: "post",
                        dataType: "json",
                        data: {
                            nbhId: function () {
                                return $("input[name='nbhId']").val();
                            },
                            district: function () {
                                return $("#districtId").val();
                            },
                            nbhName: function () {
                                return $("#nbhNameId").val();
                            }
                        }
                    }
                }
            },
            messages: {
                mobile: {required: "用户登录名不能为空", remote: jQuery.format("用户登录名已存在")},
                confirmNewPassword: {equalTo: "输入与上面相同的密码"}
            }
        });


        $("#go_back_btn").on("click", function () {
            goBack();
        });

        $("#save_btn").on("click", function () {
            saveBtn();
        });
    });

    function goBack() {
        document.location.href = "${GLOBAL.basePath}/neighborhood/list";
    }

    //监听地址输入框
    function queryAddress() {
        $("#addressInfo").html("");
        $.ajax({
            type: 'post',
            url: '${GLOBAL.basePath}/qiniu/query?q=' + $("#search").val(),
            dataType: "json",
            success: function (data) {
                data = jQuery.parseJSON(data)
                loadData(data);
            }
        });
    }

    function saveBtn() {
        getImageKeys();
    }

    function getImageKeys() {
        var data = getAllImageInfo();
        if (data.success) {
            if (data.size > 2) {
                $("#imgFileIds").val(data.data);
                $("#neighborhoodForm").submit();
            } else {
                $("#upload_file_container").empty();
                $("#uploadInfo").html("不能少于3张");
                return;
            }
        } else {
            alert(data.msg);
        }
    }

    $.widget("custom.catcomplete", $.ui.autocomplete, {
        _create: function () {
            this._super();
            this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
        },
        _renderMenu: function (ul, items) {
            var that = this, currentCategory = "";
            $.each(items, function (index, item) {
                var li;
                if (item.name != currentCategory) {
                    ul.append("<li class='ui-autocomplete-category strategy'>"
                        + item.name + "</li>");
                    currentCategory = item.name;
                }
                li = that._renderItemData(ul, item);
                if (item.name) {
                    li.attr("aria-label", item.name + " : " + item.value);
                }
            });
        }
    });

    function loadData(data) {
        $("#search").catcomplete({
            delay: 0,
            source: data,
            select: function (event, ui) {
                console.error("select->" + ui.item.value);
                $("#lat").val(ui.item.lat);
                $("#lon").val(ui.item.lon);
            }
        });
    }
</script>
